<template>
	<view class="template-content">
		<!-- 全屏背景图 -->
		<image src="/static/index/juqing/background.png" mode="aspectFill"
			style="position: fixed; z-index: -1; width: 100vw; height: 100vh; top: 0; left: 0;"></image>

		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back tn-navbg' @click="goBack">
				<text class='icon tn-icon-left-arrow'></text>
			</view>
		</tn-nav-bar>



		<view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">

			<view class="tn-text-justify">
				<view class="tn-text-center">
					<text class="tn-bg-gray--light tn-text-xs"
						style="border-radius: 6rpx;padding: 10rpx 14rpx;">晚上7:02</text>
				</view>
				<!-- 对方的消息 -->
				<view class="tn-margin">
					<view class="tn-flex tn-flex-row-between tn-flex-col-center">
						<view class="justify-content-item">
							<view class="tn-flex tn-flex-col-top tn-flex-row-left">
								<view class="logo-pic tn-shadow-blur tn-margin-top-sm">
									<image class="logo-image" src="/static/logo.png" mode="aspectFill"></image>
								</view>
								<view class="tn-padding-right tn-color-black">
									<view class="tn-padding-left-sm tn-text-bold tn-margin-top-sm" style="max-width: 62vw;">
										苏樱
									</view>
									<view class="tn-flex tn-flex-col-center">
										<view class="tn-bg-gray--light tn-margin-sm tn-padding-sm message-bubble">
											<text class="">你好厉害啊！</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 我的消息 -->
				<view class="tn-margin">
					<view class="tn-flex tn-flex-row-between tn-flex-col-center">
						<view class="justify-content-item">
							<!-- 预留空位 -->
						</view>
						<view class="justify-content-item">
							<view class="tn-flex tn-flex-col-top tn-flex-row-left">
								<view class="tn-padding-left tn-color-black">
									<view class="tn-padding-right tn-text-bold tn-margin-top-sm tn-text-right"
										style="max-width: 62vw;">
										小菜鸟
									</view>
									<view class="tn-flex tn-flex-col-center">
										<view class="tn-bg-gray--light tn-margin-sm tn-padding-sm message-bubble">
											<text class="">要不要我再厉害点啊！</text>
										</view>
									</view>
								</view>
								<view class="logo-pic tn-shadow-blur tn-margin-top-sm">
									<image class="logo-image" src="/static/author.jpg" mode="aspectFill"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>


		<view class="tabbar footerfixed tn-bg-white">
			<view class="tn-flex tn-flex-row-between tn-flex-col-center">
				<view class="justify-content-item tn-margin-top">
					<view class="tn-flex tn-flex-row-center tn-flex-col-center">
						<!-- 语音按钮 -->
						<view class="tn-flex tn-flex-row-center tn-padding-right tn-padding-left-sm" @tap="toggleVoice">
							<view
								class="icon27__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur"
								:style="isRecording ? 'background-color: #ff4444!important;' : ''"
								style="background-color: #F3F2F7; transition: all 0.3s;">
								<view :class="isRecording ? 'tn-icon-audio' : 'tn-icon-voice'"
									:style="isRecording ? 'color: white;' : 'color: #7C8191;'"></view>
							</view>
						</view>

						<!-- 输入框 -->
						<view class="topic__info__item__input">
							<input v-model="inputText" placeholder-class="input-placeholder" placeholder="请输入消息"
								style="padding: 15rpx 20rpx; border-radius: 50rpx;" />
						</view>
					</view>
				</view>
				<view class="justify-content-item tn-flex-row-center tn-flex-col-center tn-margin-top tn-margin-right">
					<view class="topic__info__item__sure">
						<view class="tn-flex-1 justify-content-item tn-text-center">
							<tn-button shape="round" backgroundColor="#1D2541" width="100%" shadow @click="sendMessage">
								<text class="tn-color-white" hover-class="tn-hover" :hover-stay-time="150">
									发 送
								</text>
							</tn-button>
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class='tn-tabbar-height'></view>

	</view>
</template>

<script>
	const recorderManager = uni.getRecorderManager();
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'

	export default {
		name: 'TemplateContent',
		mixins: [template_page_mixin],
		data() {
			return {
				isRecording: false,
				inputText: '',
				hasPermission: false,
				recordTime: 0,
				recordOptions: {
					duration: 60000,
					sampleRate: 44100,
					numberOfChannels: 1,
					encodeBitRate: 96000,
					format: 'mp3',
					frameSize: 50
				},
				
				// 新增聊天相关数据
				messageList: [], // 聊天记录列表
				loading: false, // 加载状态
			}
		},
		methods: {
			// 切换语音按钮状态
			toggleVoice() {
				this.isRecording = !this.isRecording;
				if (this.isRecording) {
					console.log('开始录音');
				} else {
					console.log('停止录音');
				}
			},
			
			// 发送消息
			async sendMessage() {
				if (!this.inputText.trim()) {
					uni.showToast({
						title: '请输入消息内容',
						icon: 'none'
					})
					return
				}

				// 添加用户消息到列表
				this.messageList.push({
					type: 'user',
					content: this.inputText,
					avatar: '/static/author.jpg',
					name: '小菜鸟'
				})

				const userInput = this.inputText
				this.inputText = '' // 清空输入框
				this.loading = true

				try {
					const response = await uni.request({
						url: `http://172.16.53.187:8000/generate?prompt=${encodeURIComponent(userInput)}`, // 使用模板字符串拼接并编码
						method: 'POST',
						data: {}, // 由于参数已经在 URL 中，这里可以为空
						header: {
							'content-type': 'application/json'
						}
					})

					// 添加AI回复消息到列表
					this.messageList.push({
						type: 'ai',
						content: response.data.generated_text || '抱歉，我现在无法回答您的问题',
						avatar: '/static/logo.png',
						name: '苏樱'
					})
				} catch (error) {
					console.error('发送消息失败：', error)
					uni.showToast({
						title: '发送失败，请重试',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 添加输入框点击态 */
	.topic__info__item__input input {
		padding: 20rpx;
		min-width: 400rpx;
		// background-color: rgba(0, 3, 72, 0.05);
		border-radius: 10rpx;
	}

	/* 录音状态样式 */
	.icon27__item--icon {
		transition: all 0.3s ease;
	}

	// 消息气泡通用样式
	.message-bubble {
		max-width: 62vw;
		background-color: rgba(244, 244, 244, 0.6) !important;
		border-radius: 12rpx; // 基础圆角

		// 左侧消息样式
		&--left {
			border-radius: 0 15rpx 15rpx 15rpx;
		}

		// 右侧消息样式
		&--right {
			border-radius: 15rpx 0 15rpx 15rpx;
		}
	}

	/* 胶囊导航栏样式 */
	.tn-custom-nav-bar__back {
		width: auto;
		height: auto;
		position: relative;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-left: 30rpx;
		
		.icon {
			font-size: 46rpx;
			color: #FFFFFF;
			text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.4);
		}
		
		&:active {
			.icon {
				transform: scale(0.92);
			}
		}
	}

	/* 导航栏背景 */
	.tn-navbg {
		background: none !important;
		box-shadow: none;
		padding-left: 0;
	}

	.tn-tabbar-height {
		min-height: 100rpx;
		height: calc(120rpx + env(safe-area-inset-bottom) / 2);
	}

	/* 用户头像 start */
	.logo-image {
		width: 80rpx;
		height: 80rpx;
		position: relative;
	}

	.logo-pic {
		// background-size: cover;
		// background-repeat: no-repeat;
		// // background-attachment:fixed;
		// background-position: top;
		// box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 50%;
		overflow: hidden;
		/* 添加溢出隐藏 */
		width: 80rpx;
		/* 添加宽度 */
		height: 80rpx;
		/* 添加高度 */
		position: relative;
		// overflow: hidden;
		// background-color: #FFFFFF;
	}

	.bg-img-cont {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		height: 260rpx;
		width: 55vw;
		margin: 10rpx 0 0 0;
		border-radius: 12rpx;
	}

	/* 图标容器27 start */
	.icon27 {
		&__item {
			width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 70rpx;
				height: 70rpx;
				font-size: 50rpx;
				border-radius: 50%;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;


				}
			}
		}
	}


	/* 底部 start*/
	.footerfixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 999;
		background-color: rgba(255, 255, 255, 0.5);
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.tabbar {
		align-items: center;
		min-height: 130rpx;
		padding: 0;
		height: calc(130rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom) / 2);
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	/* 头像*/
	.avatar-all {
		width: 60rpx;
		height: 60rpx;
		border: 4rpx solid rgba(255, 255, 255, 0.05);
		border-radius: 50%;
		overflow: hidden;
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
	}

	/* 内容*/
	.topic {
		position: relative;
		height: 100%;
		z-index: 1;
		margin-bottom: 120rpx;


		/* 表单信息 start */
		&__info {
			margin: 0 50rpx;
			margin-top: 105rpx;
			padding: 30rpx 51rpx;
			border-radius: 20rpx;
			background-color: rgba(255, 255, 255, 1);
			border: 2rpx solid rgba(255, 255, 255, 0.1);
			box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);

			&__item {

				&__input {
					width: 400rpx;
					height: 60rpx;
					background-color: rgba(0, 3, 72, 0.05);
					border-radius: 10rpx;

					&__left-icon {
						width: 10%;
						font-size: 44rpx;
						margin-left: 20rpx;
						margin-right: 5rpx;
						color: #C6D1D8;
					}

					&__content {
						width: 80%;
						padding-top: 0rpx;
						padding-left: 30rpx;

						&--verify-code {
							width: 56%;
						}

						input {
							font-size: 35rpx;
							color: #1D2541;
							// letter-spacing: 0.1em;
						}
					}

					&__right-icon {
						width: 10%;
						font-size: 34rpx;
						margin-right: 20rpx;
						color: #78909C;
					}

					&__right-verify-code {
						width: 34%;
						margin-right: 20rpx;
					}
				}

				&__button {
					width: 100%;
					height: 60rpx;
					text-align: center;
					font-size: 31rpx;
					font-weight: bold;
					line-height: 77rpx;
					// text-indent: 1em;
					border-radius: 100rpx;
					color: #FFFFFF;
					background-color: rgba(255, 255, 255, 0.2);
					// border: 2rpx solid #FFFFFF;
				}

				&__sure {
					height: 60rpx;
					width: 140rpx;
				}

			}
		}

		/* 表单信息 end */

		/* 内容 end */

	}

	/deep/.input-placeholder {
		font-size: 30rpx;
		color: #7C8191;
	}
</style>